<template>
  <div id="firstPage">
    <h6></h6>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="always">
          <el-row>
            <el-col :span="12"><i class="el-icon-location-information" style="font-size: 50px;line-height: 100px"></i>
            </el-col>
            <el-col :span="12"><h1> 应到人数</h1><span
                style="font-size: 20px;font-weight: bold;line-height: 120px">{{ userList.length }}</span></el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <el-row>
            <el-col :span="12"><i class="el-icon-s-flag" style="font-size: 50px;line-height: 100px"></i>
            </el-col>
            <el-col :span="12"><h1> 实到人数</h1><span
                style="font-size: 20px;font-weight: bold;line-height: 120px">{{ ToDayUserSignList.length }}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <el-row>
            <el-col :span="12"><i class="el-icon-sunset" style="font-size: 50px;line-height: 100px"></i>
            </el-col>
            <el-col :span="12"><h1>今日脱岗人数</h1><span
                style="font-size: 20px;font-weight: bold;line-height: 120px">{{ warningMessage.length }}</span></el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <el-row>
            <el-col :span="12"><i class="el-icon-sunny" style="font-size: 50px;line-height: 100px"></i>
            </el-col>
            <el-col :span="12"><h1>今日打卡率</h1><span
                style="font-size: 20px;font-weight: bold;line-height: 100px">{{
                ((ToDayUserSignList.length / userList.length) * 100).toFixed(2)
              }}%</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <br>
    <br>
    <el-row>
      <el-col :span="24">
        <div id="chart1"></div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as echarts from "echarts";
import request from "@/utils/request";

export default {
  data() {
    return {
      //user
      userList: {},
      //打卡集合
      userSignList: {},
      //今日打卡
      ToDayUserSignList: {},
      //脱岗
      warningMessage: {},
    }
  },
  mounted() {
    this.chart1();
  },
  async created() {
    //用户
    await request("user","get",null).then((o) => {
      this.userList = o
    })
    //总打卡
    await request("userSign").then((o) => {
      this.userSignList = o
    })
    //脱岗
    await request("warningMessage/curDate").then((o) => {
      this.warningMessage = o
    })
    //今日打卡
    await request("userSign/userSignToday").then((o) => {
      this.ToDayUserSignList = o
    })


  },
  methods: {

    //查打卡和所属部门
    async chart1() {
      let data = await request("userSign/toUserAndDept")
      const grouped = {}
      let times = []
      const result = {}
      let names = []
      // 分组统计
      data.forEach(item => {
        // 获取时间和名称
        const date = item.singDateTime;
        const name = item.name;
        //判断没有部门的直接结束程序 不取没有部门的数据
        if (!name) return;
        //取时间 且时间不重复判断日期是否在最近10天内 暂时不起作用
        if(times.length < 10 ||
            new Date(date) > new Date(times[times.length - 10])) {
          if (!times.includes(date)) {
            times.push(date);
          }
        }
        //如果名称对应的分组对象不存在，就创建一个新的对象
        if (!grouped[name]) {
          grouped[name] = {};
        }
        //判断相同的name和日期是否存在，不存在就创建一个空对象值为零，存在值就加加
        if (!grouped[name][date]) {
          grouped[name][date] = 0;
        }
        //相同所以值加加
        grouped[name][date] += item.count || 1;
      })
      // 合并分组结果Object.keys(grouped) 取出所有名称键名
      Object.keys(grouped).forEach(name => {
        result[name] = result[name] || {};
        Object.keys(grouped[name]).forEach(date => {
          result[name][date] = (result[name][date] || 0) + grouped[name][date];
        })
      })
      // 生成图表数据
      const series = [];
      //将数据加到图表
      Object.keys(result).forEach(name => {
        names.push(name)
        series.push({
          name,
          type: 'line',
          stack: 'Total',
          data: times.map(time => {
            return result[name][time] || 0;
          })
        });
      })
      var chartDom = document.getElementById('chart1');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '各工程部打卡记录',
          textStyle: {
            textAlign: 'center'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: names
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: times
        },
        yAxis: {
          type: 'value'
        },
        series: series
      };
      option && myChart.setOption(option);
    }
  },
}
</script>

<style scoped>
#firstPage {
  background: #f3f5f7;
}

.el-card {
  background: #7ec2dc;
  height: 150px;
}

#chart1 {
  height: 400px;
  background: #ece0e0;
}


</style>